<template>
	<view class="wanlgroups-user-container">
		<!-- 主体 -->
		<view class="wanlgroups-user-container__main" style="background-color: #fff;"> 
			<view
				class="head text-white"
				:style="{ paddingTop: '12px' }"
				style="padding: 30rpx 0rpx 0rpx 30rpx; background-color: white;"
			>
				<!-- 	@click="handleTheme" -->
				<view class="userinfo">
					<view
						class="cu-avatar margin-right-bj round"
						:style="{
							backgroundImage: `url(${$wanlshop.oss(userData.user.avatar, 88, 88)})`
						}"
					/>
					<view style="width: 56%;">
						<view class="text-xl margin-bottom-xs text-color">{{ userData.user.nickname }}</view>
					
						
					</view>
					<view class="zhibo-bq">	<text>升级为企业</text></view>
					
				</view>
		</view>
		</view>
		<view class="shouyi" style="display: flex; height: 135rpx; background-color: rgb(255 134 44);">
			<view style="padding: 30rpx;width: 76%;">
				<view @tap="$wanlshop.auth('/pages/user/money/list')"><text style="color: #FFFFFF;font-size: 32rpx;">总收益 <text class="mingxi">明细</text></text></view>
				
				<view style="font-size: large;color: white;">0.00</view>
			</view>
			<view style="    border: 1px solid #fff;
    height: 48rpx;
    text-align: center;
    width: 63px;
    border-radius: 25px 25px;margin-top: 45rpx;" @tap="$wanlshop.auth('/pages/user/money/withdraw')"><text style="color: #fff;">提现</text></view>
			
		</view>
		<view class="wanlgroups-user-container__list bg-white" style="margin-top: 0px;">
			<view class="questionbag" :style="{ top: `${headHeight}px` }" style="margin: 30rpx;">
				<text style="font-weight: 500;">我的主播</text>

			</view>
			<view v-if="host.length == 0">
				<wanl-empty src="apply" style="100px" text="您的名下暂无主播 !" />
			
			</view>
			<view>
				<uni-list v-for="item in host" :key="item.id" :avatar-circle="true">
					<uni-list-chat :avatar-circle="true" :title="item.user.nickname" :avatar="item.user.avatar" direction="row"></uni-list-chat>
					
				</uni-list>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="WANL-MODAL wanlgroups-user-container__modal">
			<view
				class="cu-modal top-modal"
				:class="modalName == 'menu' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct @change="hideModal" />
				</view>
			</view>
			<!-- 分享 -->
			<view
				class="cu-modal bottom-modal"
				:class="modalName == 'share' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						:scrollAnimation="scrollAnimation"
						shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱"
						:image="$wanlshop.appstc('/common/logo.png')"
						:href="
							common.appConfig.domain +
								'/pages/apps/find/user?QRtype=user'
						"
						@change="hideModal"
					/>
				</view>
			</view>
			<view
				class="cu-modal praised"
				:class="modalName == 'praised' ? 'show' : ''"
				@tap="hideModal"
			>
				<view class="cu-dialog" @tap.stop="">
					<image
						:src="$wanlshop.appstc('/common/find_fans3x.png')"
						mode="widthFix"
					></image>
					<view class="margin-tb-lg">
						<text class="wanl-gray-dark">
							{{
								`“${userData.user.nickname}”共收获得 ${$wanlshop.toFormat(
									userData.praised < 0 ? 0 : userData.praised,
									'thousand'
								)} 个赞`
							}}
						</text>
					</view>
					<view class="padding-tb-bj solid-top" @tap="hideModal">
						<text class="text-bold">确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			headHeight: 0,
			headerOpacity: 0,
			windowHeight: 0,
			headTop: 0,
			isMyfind: false,
			loadingFollow: false,
			modalName: null,
			scrollAnimation: 300,
			userData: {
				user_no: '',
				user: {
					avatar: '',
					nickname: '加载中..'
				},
				follow: 0,
				fans: 0,
				likes: 0,
				praised: 0,
				color: '#e9dacd',
				image: '',
				isFollow: 0
			},
			stateText: {
				publish: { icon: 'wlIcon-jiazai wlIconfont-spin', text: '发布中', color: '#fff' },
				examine: {
					icon: 'wlIcon-shouhoufuwu-zidongpingjia',
					text: '待审核',
					color: '#e6442b'
				},
				hazard: { icon: 'wlIcon-zhuyidapx', text: '内容违规', color: '#e6442b' },
				transcoding: {
					icon: 'wlIcon-jiazai1 wlIconfont-spin',
					text: '转码中',
					color: '#fff'
				},
				screenshot: {
					icon: 'wlIcon-tupian wlIconfont-spin',
					text: '生成封面中',
					color: '#fff'
				}
			},
			currentId: 0,
			typeList: {
				new: 'bg-gradual-yellow',
				live: 'wanl-bg-orange',
				want: 'bg-gradual-green',
				activity: 'bg-gradual-orange',
				show: 'wanl-bg-pink',
				video: 'wanl-bg-pink'
			},
			host:[],
			navList: [
				{
					type: 'works',
					type_text: '作品',
					dataList: [],
					loadingType: 'more',
					current_page: 1
				},
				{
					type: 'likes',
					type_text: '喜欢',
					dataList: [],
					loadingType: 'more',
					current_page: 1
				}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在疯狂加载中...',
				contentnomore: '我是有底线的'
			}
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		// 计算页面尺寸
		let sys = this.$wanlshop.wanlsys();
		this.headTop = sys.top;
		this.headHeight = sys.height;
		this.windowHeight = sys.windowHeight;
		// 加载 Api
		if (option.id) {
			this.loadData(option);
		} else {
			this.loadData({ id: null });
		}
	},
	// 下拉刷新
	onReachBottom() {
		
	},
	onPageScroll(e) {
		let tmpY = 170;
		e.scrollTop = e.scrollTop > tmpY ? 170 : e.scrollTop;
		this.headerOpacity = e.scrollTop * (1 / tmpY);
	},
	methods: {
		async loadData(data) {
			this.$api.post({
				url: '/wanlshop/agent/index',
				data: data,
				success: res => {
					this.userData = res;
					this.host = res.host;
				}
			});
		},
		
		// 选择Tag
		handleSelect(index) {
			this.currentId = index;

		},
		handleBack() {
			this.$wanlshop.back(1);
		},
		handleUserEdit() {
			this.$wanlshop.auth('/pages/user/setting/user');
		},
		// 格式化html
		formatHtml(content) {
			return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 300;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.uni-list-chat__content{
	margin: auto;
}
.text-color{
	color: black;
}
.zhibo-bq{
	    background-color: #210f0f;
	    height: 48rpx;
	    text-align: center;
	    width: 167rpx;
	    border-radius: 25px 0 0 25px;
}
.mingxi{
	    font-size: 23rpx;
	    padding: 0 10rpx;
	    border: 1px solid;
	    border-radius: 20rpx;
	    margin-left: 10rpx;
}
.shouyi{
	width: 90%;margin: auto;margin-top: 30rpx;border-radius: 20rpx;
}
.wanlgroups-user-container {
	&__head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.background {
			position: absolute;
			left: 0;
			right: 0;
			z-index: 1;

			.bgcolor {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.navigater {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			z-index: 9;
			padding-left: 25rpx;
			padding-right: 25rpx;
			/* #ifdef MP */
			padding-right: 220rpx;
			/* #endif */
			& > view {
				display: flex;
				align-items: center;
			}
		}
	}

	&__main {
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position-y: center;
		.text-white-agba {
			color: rgba(255, 255, 255, 0.9);
		}
		.head {
			padding: 0 30rpx;
			padding-bottom: 50rpx;
			background-color: rgba(0, 0, 0, 0.4);

			.userinfo {
				display: flex;
				align-items: center;
				.cu-avatar {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.findinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.quantity {
					display: flex;
					.project {
						width: 100rpx;
						margin-right: 10rpx;
						overflow: hidden;
					}
				}
			}

			.shopinfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.solid-top {
					&::after {
						border-top: 1rpx solid rgba(255, 255, 255, 0.92);
					}
				}
				.cu-avatar {
					background-color: rgba(0, 0, 0, 0.1);
					width: 65rpx;
					height: 65rpx;
				}
				.subject {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info {
						& > view {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}

	&__list {
		margin-top: -30rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 2rpx;
		.questionbag {
			position: -webkit-sticky;
			position: sticky;
			z-index: 99;
			margin: 0 16rpx;
		}
		.main {
			.empty {
				padding-top: 100rpx;
				display: flex;
				justify-content: center;
				image {
					width: 320rpx;
					height: 320rpx;
				}
			}
			.list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 16rpx;
				justify-content: space-between;
				.item {
					margin-bottom: 40rpx;
					flex: 0 0 calc((100% - 16rpx) / 2);
					overflow: hidden;
					.examine {
						height: 460rpx;
						position: relative;
						.cover {
							height: 460rpx;
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
						}
						.state {
							position: absolute;
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							background-color: rgba(0, 0, 0, 0.2);
						}
					}
				}
			}
		}
	}

	&__modal {
		.praised {
			.cu-dialog {
				width: 70%;
				overflow: hidden;
				image {
					height: 100%;
				}
			}
		}
	}
}
</style>
